<template>
  <div class="app">
    <div class="container">
      <!-- 左边部分 -->
      <div class="left_side">
        <h2 class="title_header">让我们更懂校园 让校园更加智慧</h2>
        <img src="../img/login1.png" alt="校园规划图" title="校园图" class="title_img">
      </div>
      <!-- 右边部分 -->
      <div class="login-container">
        <el-form class="login-form" :model="loginForm" label-width="90px">
          <h3 class="login_title">实习就业管理平台</h3>
          <el-form-item label="用户名:" prop="username">
            <el-input class="form-item" v-model="username" placeholder="请输入用户名">
              >
              <template #prefix>
                <el-icon>
                  <Avatar />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input class="form-item" type="password" v-model="password" placeholder="请输入密码">
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="form-item" type="primary" @click="handleLogin()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { login } from "../api/userApi";
import Cookies from "js-cookie";


export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  // methods提供处理逻辑函数
  methods: {
    handleLogin() {
      login({
        username: this.username,
        password: this.password,
      })
        .then((res) => {
          if (res.user.is_school_admin || res.user.is_superuser) {
            Cookies.set("token", res.token);
            ElMessage({
              message: "登录成功，即将跳转...",
              type: "success",
            });
            setTimeout(() => {
              // 路由跳转
              this.$router.push({ name: "home" });
            }, 500);
          } else {
            ElMessage({
              message: "您不是管理员用户",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);
          // ElMessage({
          //   message: error,
          //   type: "warning",
          // });
        });
    },
  },
};

</script>
<style scoped>
.container {
  display: flex;
  width: 100%;
  height: 98vb;
  box-sizing: border-box;
  /* 同时设置主轴方向和不换行。 */
  flex-flow: row nowrap;
  justify-content: space-evenly;
  /* border: 1px solid red; */
}

.container .left_side {
  flex: 2;
  /* border: 1px solid pink; */
}

.container .left_side .title_header {
  font-size: 53px;
  color: #347caf;
  margin-bottom: 0;
}

.container .left_side .title_img {
  width: 900px;
}

.container .login-form .login_title {
  display: inline-block;
  font-size: 35px;
  color: #347caf;
  text-align: center;
  margin-bottom: 40px;
}


.login-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  /* height: 650px; */
  background-color: #ffffff;
  /* 设置浅蓝色背景 */
  padding: none;
}

.login-form {
  width: 345px;
  /* 图形大小 */
  padding: 45px;
  height: 330px;
  /* 圆角 */
  border-radius: 85px;
  margin-right: 60px;
  /* 右边距为20像素 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 50);
}

.login-form .form-item {
  width: 200px;
  margin: 0px 0px 10px 20px;
}
</style>
